<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>在线平台</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <style>
        body {
            font-family: "Lato", sans-serif;
        }

        .sidenav {
            height: 100%;
            width: 248px;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #f1f1f1;
            overflow-x: hidden;
            padding-top: 50px;
        }

        .sidenav a {
            margin-left: 16px;
            width: 215px;
            padding: 16px 16px 16px 16px;
            text-decoration: none;
            font-size: 25px;
            color: #000000;
            display: block;
            background-color: white;
            border: 52px #000000;
        }

        .sidenav a:hover {
            background-color: #2494ef;
            color: #f1f1f1;
        }

        .main {
            margin-left: 248px; /* 与sidenav的宽度相同 */
            font-size: 28px; /* 字体放大，让页面可滚动 */
            padding: 0px 10px;
        }

        @media screen and (max-height: 450px) {
            .sidenav {padding-top: 15px;}
            .sidenav a {font-size: 18px;}
        }
    </style>
</head>
<body style="background-color: #f1f1f1">
    <nav class="navbar navbar-default" role="navigation" style=" background-color:#2494ef; box-shadow: 0px 0px 6px #000; height: 50px;border: 0px">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html" style="color: white;">软件项目管理在线学习平台</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li><a class="navbar-brand" href="TeaNavigationPage.html" style="color: white;font-size: 20px">| 课程</a></li>
                </ul>
            </div>
            <div style="margin-left: 1780px">
                <ul class="nav navbar-nav">
                    <li><a class="navbar-brand" href="TeaInfo.html" style="color: white;font-size: 20px">个人中心</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div style="position: fixed;z-index: -1;">
        <div class="sidenav" style="box-shadow: 0px 0px 6px #000;">
            <img src="bg.png" width="215px" height="170px" style="margin-left: 16px;margin-top: 10px; border-radius: 10px"/>
            <a href="TeaCourse.html" style="margin-top: 10px">课程内容</a>
            <a href="TeaPractice.html">课程实践</a>
            <a href="TeaMannger.html">我的学生</a>
            <a href="TeaMessageBoard.html">留言板</a>
        </div>
        <div class="main">
            <div class="panel panel-default" style="width:1600px">
                <div class="panel-body">
                    我的学生
                    <label for="selectCourse">选择课程</label><select onchange="changeCourse()" id="selectCourse"></select>
                </div>
                <div class="panel-footer" style="font-size: 15px">
                    <table id="studentsTable" class="table table-bordered">
                    </table>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    let token = $.cookie("token");
    let $selectCourse = $("#selectCourse");
    $.ajax({
        async:false,
        type:"GET",
        dataType: "json",
        data:{
            "token":token
        },
        url: 'users/allCourse/',
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest);
            console.log(textStatus);
            console.log(errorThrown);
        },
        success: function (response) {
            let data = response.data;
            for (let i in data){
                let course = data[i];
                let insertHtml = "";
                if (i==="0"){
                    insertHtml="selected='selected'";
                }
                console.log(course);
                let optionHtml = "<option value='"+course['id']+"'>"+course['name']+"</option>";
                $selectCourse.append(optionHtml);
            }
            changeCourse();
        }
    });

    function changeCourse() {
        let $studentsTable = $("#studentsTable");
        let courseId = $selectCourse.val();
        $.ajax({
            async:false,
            type:"GET",
            dataType: "json",
            data:{
                "courseId":courseId
            },
            url: 'course/allStudents',
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            },
            success: function (response) {
                $studentsTable.empty();
                let data = response.data;
                let tableHead = "'\n" +
                    "<tr>\n" +
                    "    <td>学生姓名</td>\n" +
                    "    <td>学生学号</td>\n" +
                    "    <td width=\"550px\">操作</td>\n" +
                    "</tr>";
                $studentsTable.append(tableHead);
                for (let i in data){
                    let user = data[i];
                    let rowHtml =
                        "<tr>\n" +
                        "<td>"+user['name']+"</td>\n" +
                        "<td>"+user['uid']+"</td>\n" +
                        "<td><button onclick='deleteStudent(this)' userId='"+user['uid']+"' type=\"button\" class=\"btn btn-danger\" style=\"margin-left: 16px; width: 150px;\">删除</button></td>\n" +
                        "</tr>";
                    $studentsTable.append(rowHtml);
                }
            }
        });
    }
    function deleteStudent(event) {
        let uid = event.attributes['userId'].value;
        let courseId = $selectCourse.val();
        $.ajax({
            async:false,
            type:"DELETE",
            dataType: "json",
            data:{
                "uid":uid
            },
            url: 'users/'+courseId,
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            },
            success: function () {
                changeCourse();
            }
        });
    }

</script>
</html>
